import React, { useEffect } from 'react';
import { useNavigate ,useLocation} from 'react-router-dom'
import '../ServeProjectAdd/serveEdit.scss'
import { Button, Form, Input, Select, Radio, Col, message, Modal } from 'antd';
import { editServerPro } from '../../../../api/Service'
import { ExclamationCircleFilled } from '@ant-design/icons';
interface Props {

}
function ServeProjectAdd(props: Props) {
    const [messageApi, contextHolder] = message.useMessage();
    const { confirm } = Modal;
    var navigate = useNavigate()
    const { TextArea } = Input;
    const [form] = Form.useForm()
    var location = useLocation()

    useEffect(()=>{
        form.setFieldsValue(location.state)
    },[])
    //表单验证通过提交
    const onFinish = async (values: any) => {
        showConfirm(values)
    };
    const showConfirm = (values: any) => {
        confirm({
            title: '提交确认',
            icon: <ExclamationCircleFilled />,
            content: '确定提交服务项目信息吗?',
            okText: "确认",
            cancelText: "取消",
            async onOk() {
                var res = await editServerPro({projectId:location.state.projectId,...values})
                console.log(res);
                if (res.data.code == 200) {
                    messageApi.open({
                        type: 'success',
                        content: '编辑成功',
                    });
                    setTimeout(() => {
                        navigate(-1)
                    }, 1000)
                }
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    };


    return (
        <div className='serveedit'>
            {contextHolder}
            <div className="main">
                <div className="title">
                <div className='leftborder'></div>
                <h3>编辑服务项目</h3>
            </div>
                <div className="resident">
                    <h4>服务项目信息</h4>
                    <div className="inputbox">
                        <Form
                            name="basic"
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                            layout="inline"
                            onFinish={onFinish}
                            form={form}
                        >

                            <Col span={8}>
                                <Form.Item
                                    label="项目名称"
                                    name="projectName"

                                    rules={[{ required: true }]}
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="服务次数"
                                    name="projectAccount"
                                    rules={[{ required: true }]}
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="项目类型"
                                    name="projecttypeId"
                                    rules={[{ required: true }]}
                                >
                                    <Select options={[
                                        {value:1,label:"付费项目"},
                                        {value:2,label:"免费项目"}
                                    ]}>
                                    </Select>
                                </Form.Item>
                            </Col>

                            <Col span={8}>
                                <Form.Item
                                    label="项目原价"
                                    name="projectPrice"
                                    rules={[{ required: true }]}
                                >
                                    <Input placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={24}></Col>
                            <Col span={8}>
                                <Form.Item
                                    label="服务介绍"
                                    name="projectIntroduce"
                                    rules={[{ required: true }]}
                                >
                                    <TextArea rows={4} placeholder='请输入' />
                                </Form.Item>
                            </Col>

                            <Col span={24}>
                                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={() => { navigate(-1) }}>返回</Button>
                                </Form.Item>
                            </Col>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ServeProjectAdd;
















